<template>
  <FrontSideTreeTable
    ref="frontSideTreeTable"
    treeDataUrl="/rel/superstructureMember/getSuperstructureTree"
    tableDataUrl="/rel/superstructureMember/getList"
    treeTitle="上部结构类型列表"
    :tableTitle="selectedNode.name+'构件类型列表'"
    :tableProps="tableProps"
    :columns="columns"
    searchHint="根据上部结构类型、构件名或部件名搜索"
    :searchProps="searchProps"
    @onNodeClick="handleNodeClick"
    @onAssociate="handleAssociate"
    @onTableCreated="handleTableCreated"
    @onTreeCreated="handleTreeCreated">
    <!--关系绑定对话框-->
    <template slot="dialog">
      <el-dialog title="关系绑定" size="tiny" v-model="isAssociationDialogVisible" :close-on-click-modal="closeOnClickModal">
        <!-- 关系绑定树形菜单 -->
        <el-card v-loading="loadingSuperPartsMember" class="card">
          <div slot="header">
            <span class="card-head">{{selectedNode.name}}关系绑定</span>
          </div>
          <el-tree
            ref="superPartsMemberTree"
            class="tree-view"
            node-key="id"
            :data="superPartsMemberData"
            :props="treeProps"
            highlight-current
            show-checkbox
            accordion>
          </el-tree>
        </el-card>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isAssociationDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="associate" :loading="isAssociating">确 定</el-button>
        </div>
      </el-dialog>
    </template>
  </FrontSideTreeTable>
</template>

<script>
  import FrontSideTreeTable from "../../template/FrontSideTreeTable.vue"
  import {doGet, doPost} from "../../../assets/js/utils/RequestUtils"
  import {treeOf} from "../../../assets/js/utils/TreeUtils"
  import {ASSOCIATE} from "../../../assets/js/enum/FunctionType"
  import {getAuthorizedFunction} from "../../../assets/js/global"

  const SUPER_PARTS_MEMBER_URL = "/rel/superstructureMember/getSuperPartsMemberTree",
    ASSOCIATE_URL = "/rel/superstructureMember/add";

  export default {
    name:"SuperstructureMember",
    data() {
      return {
        tableProps:{parentId:"superstructureTypeId"},
        treeProps:{
          children: 'children',
          label: 'name'
        },
        columns:[
          {prop:"superstructureTypeName", label:"上部结构类型"},
          {prop:"partsTypeName", label:"部件类型"},
          {prop:"memberTypeName", label:"构件类型"}
        ],
        isAssociationDialogVisible:false,
        closeOnClickModal:false,
        searchProps:["superstructureTypeName", "memberTypeName", "partsTypeName"],
        loadingSuperPartsMember:false,
        selectedNode:{id:"", name:""},
        superPartsMemberData:[],
        isAssociating:false,
        treeData:[],
        tableData:[]
      }
    },
    methods:{
      handleNodeClick(data) {
        this.selectedNode = data;
      },
      handleAssociate() {
        //如果不是具体的上部结构类型
        if (!this.selectedNode.parentId) {
          this.$alert("请选择具体的上部结构类型", '提示', {confirmButtonText: '确定'});
        } else {
          this.loadingSuperPartsMember = true;
          this.isAssociationDialogVisible = true;
          doGet(SUPER_PARTS_MEMBER_URL, {component: this})
            .then(response =>{
                this.superPartsMemberData = treeOf(response);
                this.$refs["superPartsMemberTree"].setCheckedKeys(this.tableData.filter(item=>item.superstructureTypeId===this.selectedNode.id).map(item=>item.memberTypeId));
            })
            .finally(() => this.loadingSuperPartsMember = false);
        }
      },
      associate() {
        this.isAssociating = true;
        doPost(ASSOCIATE_URL, {
          data:{
            superstructureTypeId:this.selectedNode.id,
            memberTypeIds:this.$refs["superPartsMemberTree"].getCheckedNodes().filter((node,index,array)=>!array.some(item=>node.id === item.parentId)).map(node=>node.id)
          },
          menuFunctionId:getAuthorizedFunction(this, ASSOCIATE),
          component:this
        })
          .then(response=>this.$message({message: response.message, type: response.status.toLowerCase()}))
          .finally(()=>{
            this.isAssociating = false;
            this.isAssociationDialogVisible = false;
            this.$refs["frontSideTreeTable"].fetchData();
          });
      },
      handleTableCreated(tableData) {
        this.tableData = tableData;
      },
      handleTreeCreated(treeData) {
        this.treeData = treeData;
      }
    },
    components:{FrontSideTreeTable}
  }
</script>

<style scoped>
  .tree-view {
    border: 0;
  }
  .card {
    margin-left: 15px;
    padding: 5px 5px 5px 5px;
  }
  .card-head {
    font-size: 1.2em;
    font-weight: bold;
  }
</style>



// WEBPACK FOOTER //
// SuperstructureMember.vue?31e4c987